/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
// Application instance for showing user-feedback messages.
//var App = new Ext.App({});



Ext.onReady(function() {
	
	


			
	// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
	api: {
		read: '/projecteditor?action=read',
		create: '/projecteditor?action=create',
		update: '/projecteditor?action=update',
		destroy: '/projecteditor?action=delete'
	}
//    url: '/projecteditor?action=dummydata'
});

// Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader(
{
       
        "successProperty": "success",
       
        "totalProperty": "total",
        "idProperty": "google_key",
        "root": "rows",
		 messageProperty: 'message'
    },
	[
//		{
//            "header": "Project Key",
//            "type": "String",
//            "name": "project_key",
//            "dataIndex": "project_key"
//        },
		 {
//            "header": "Project Number",
//            "type": "String",
            "name": "project_number",
			 allowBlank: false
//            "dataIndex": "project_number"
        }, {
//            "header": "Project Name",
//            "type": "String",
            "name": "project_name"
//            "dataIndex": "project_name"
        },
//		 {
//            "header": "Job Number",
//            "type": "String",
//            "name": "job_number",
//            "dataIndex": "job_number"
//        },
//		
		 {
//            "header": "Client Name",
//            "type": "String",
            "name": "client_name"
//            "dataIndex": "client_name"
        }, {
//            "header": "Contact Name",
//            "type": "String",
            "name": "contact_name"
//            "dataIndex": "contact_name"
        }, {
//            "header": "Contact Phone",
//            "type": "String",
            "name": "contact_phone"
//            "dataIndex": "contact_phone"
        }, {
//            "header": "Contact Email",
//            "type": "String",
            "name": "contact_email"
//            "dataIndex": "contact_email"
        }, {
//            "header": "Status",
//            "type": "String",
            "name": "status"
//            "dataIndex": "status"
        }, {
            "header": "google_key",
            "type": "String",
            "name": "google_key",
            "dataIndex": "google_key"
        }]
);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
    encode: false   // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params

});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.GroupingStore({
    id: 'user',
//    restful: true,     // <-- This Store is RESTful
    proxy: proxy,
    reader: reader,
	groupField: 'client_name',
//	autoSave: true,
    writer: writer    // <-- plug a DataWriter into the store just as you would a Reader
});

// load the store immeditately
store.load();

////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
//Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
////	alert('before write triggered.')
////    App.setAlert(App.STATUS_NOTICE, "Before " + action);
//});
//
//////
//// all write events
////
//Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
////    App.setAlert(true, action + ':' + res.message);
//});
//
//////
//// all exception events
////
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
		alert("Something bad happend while executing " + action)
//    App.setAlert(false, "Something bad happend while executing " + action);
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns =  [
	{header: "google_key", width: 0, sortable: true, dataIndex: 'google_key', hidden: true},
    {header: "Client Name", width: 100, sortable: true, dataIndex: 'client_name', editor: new Ext.form.TextField({})},
	{header: "Project Name", width: 100, sortable: true, dataIndex: 'project_name', editor: new Ext.form.TextField({})},
	{header: "Project Number", width: 100, sortable: true, dataIndex: 'project_number', editor: new Ext.form.TextField({})},
	{header: "Email", width: 100, sortable: true, dataIndex: 'contact_email', editor: new Ext.form.TextField({})},
	{header: "Phone", width: 100, sortable: true, dataIndex: 'contact_phone', editor: new Ext.form.TextField({})},
	{header: "Status", width: 100, sortable: true, dataIndex: 'status', editor: new Ext.form.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                // transform the data already specified in html
                transform: 'status_options',
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })}
//    {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
//    {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
];

    Ext.QuickTips.init();

    // use RowEditor for editing
    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    // Create a typical GridPanel with RowEditor plugin
    var userGrid = new Ext.grid.GridPanel({
//        renderTo: 'user-grid',
        iconCls: 'icon-grid',
        frame: true,
        title: 'Projects',
//        height: 300,
		region: 'center',
        store: store,
        plugins: [editor],
        columns : userColumns,
        tbar: [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: onAdd
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: onDelete
        }, '-'],
//        viewConfig: {
//            forceFit: true
//        },
		view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Projects" : "Project"]})'
        })
    });

    /**
     * onAdd
     */
    function onAdd(btn, ev) {
        var u = new userGrid.store.recordType({
			project_name: '',
			client_name: '',
			project_number: '',
			contact_email: '',
			contact_phone: '',
			status: 'InProgress'
        });
        editor.stopEditing();
        userGrid.store.insert(0, u);
        editor.startEditing(0);
    }
    /**
     * onDelete
     */
    function onDelete() {
        var rec = userGrid.getSelectionModel().getSelected();
        if (!rec) {
            return false;
        }
        userGrid.store.remove(rec);
    }
	
	var layout = new Ext.Viewport({
        title: 'Employee Salary by Month',
        layout: 'border',
        layoutConfig: {
            columns: 1
        },
//        width:600,
//        height: 600,
        items: [userGrid]
    });
//    layout.render(Ext.getBody());

});










